<!--
 * @Author: zhujunzhujunzhu 2693474327@qq.com
 * @Date: 2022-11-25 09:18:24
 * @LastEditors: zhujunzhujunzhu 2693474327@qq.com
 * @LastEditTime: 2022-11-26 17:55:59
 * @FilePath: \web-gl-learn\canvas\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas
      id="canvas"
      width="500"
      height="500"
    ></canvas>
  </body>
</html>
<script src="./ball.js"></script>
<script src="./tool.js"></script>
<script>
  async function main() {
    const canvas = document.getElementById("canvas");
    // 获取canvas上下文
    const cxt = canvas.getContext("2d");
    let x = 0;

    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = 150;
    const ball = new Ball(100, 25,30,'red',2,2);
    let angle = 0;
    const image = new Image();
    image.width = 12
    image.height = 12
    image.src = "./rong.jpg";
    await new Promise((resolve) => {
      image.onload = function () {
        resolve();
      };
    });
    function frame() {
      window.requestAnimationFrame(frame);

      // 先清空画布
      cxt.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制圆
      cxt.beginPath();
      cxt.arc(centerX, centerY, radius, 0, (360 * Math.PI) / 180, true);
      cxt.closePath();
    //   cxt.clip()
    //   cxt.drawImage(image,10,10,150,150)

      // cxt.fillStyle = '#6699ff'
      // cxt.stroke();
      // 计算小球坐标
      ball.x = centerX + Math.cos(angle) * radius;
      ball.y = centerY + Math.sin(angle) * radius;

      ball.image(cxt,image);
      // 角度递增
      angle += 0.02;
    }
    frame();
    // cxt.scale(2,2)
  }

  main();
</script>
